<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"
        :label-width="100">

    <FormItem label="客群名称" prop="name">
      <Input v-model="formValidate.name" placeholder="请输入客群名称" style="width: 200px;"></Input>
    </FormItem>
    <FormItem label="客群类型" prop="guestType">
      <Select v-model="formValidate.guestType" placeholder="请选择客群类型" style="width: 200px;">
        <Option value="01">理财客群</Option>
      </Select>
    </FormItem>
    <FormItem label="筛选条件" prop="conditions">
      <div>
        <p style="margin-bottom: 10px;" v-for="(unit,index) in selectedConditions">
          <Tag :id="unit.dimNo">{{unit.dimNm}}</Tag>
          <Select v-model="unit.type" :disabled="unit.isMulti=='1'?true:false"
                  @on-change="containListChange(unit.type,index)" style="width:100px;display: inline-block">
            <Option v-for="item in containList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Select v-model="unit.valueList" :multiple="(unit.type=='contain')?true:false"  style="width:160px;margin-left: 5px;display: inline-block">
            <Option v-for="item in unit.resultList" :value="item.labelItemNo" :key="item.labelItemNo">{{ item.labelItemName }}</Option>
          </Select>
        </p>
      </div>
      <Select v-model="formValidate.conditions" filterable multiple label-in-value @on-change='selectCondition'
              placeholder="请输入关键词搜索" style="width: 200px;">
        <Option v-for="item in conditionsList" :value="item.dimNo" :key="item.dimNo">{{ item.dimNm}}</Option>
      </Select>
    </FormItem>

    <FormItem label="" prop="satisfy">
      <Select v-model="formValidate.filterType" style="display: inline-block;width: 150px;">
        <Option value="and">满足所有条件</Option>
        <Option value="or">满足任意条件</Option>
      </Select>
    </FormItem>
    <FormItem label="客群描述" prop="desc">
      <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 3,maxRows: 5}"
             placeholder="请输入客群描述" style="width: 230px;"></Input>
    </FormItem>


    <FormItem style="margin-bottom: 0;text-align: center;">
      <Button type="primary" @click="handleSubmit('formValidate')" style="margin-right: 40px;">保存</Button>
      <Button type="ghost" @click="reset" style="margin-left: 8px">重置</Button>
    </FormItem>
  </Form>
</template>

<script>
  import Regular from '../../utils/regular'
  export default{
    data: function () {
      return {
        isEdit:false,
        filters:[],
        formValidate: {
          name: '',
          guestType:'',
          conditions:'',
          filterType:'and',
          desc: ''
      },
        ruleValidate: {
          name: [
            { required: true, message: '请输入客群名称', trigger: 'blur' }
          ],
          guestType: [
            { required: true, message: '请选择客群类型', trigger: 'change' }
          ],
//          conditions: [
//            { required: true, message: '筛选条件不能为空', trigger: 'change' }
//          ],
          desc: [
            { type: 'string', min: 3, message: '描述不能少于3个字符', trigger: 'blur' }
          ]
        },
        conditionsList: [],
        containList:[
          {label:'等于',value:'equal'},
          {label:'包含',value:'contain'}
        ],
        selectedConditions:[],

      }
    },
    components: {},
    methods: {
      getDetails(data){
        this.isEdit = true
        let _this = this
        this.formValidate.id= data.id
        this.formValidate.name= data.name
        this.formValidate.guestType= data.guestType
        this.formValidate.desc= data.desc
        this.formValidate.filterType= Regular.toJson(data.labels).filterType
        let conditions= Regular.toJson(data.labels).filters
        this.filters= Regular.toJson(data.labels).filters
        // console.log(conditions)
        let tempCondition=[]
        conditions.forEach(function (item,index) {
          tempCondition.push(item.fieldNo)
        })
        //下拉框赋值-selectedConditions自动渲染
        // console.log(tempCondition)
        this.formValidate.conditions = tempCondition
        // console.log(this.formValidate.conditions)
        // console.log(this.selectedConditions)

      },
      handleSubmit (name) {
        let _this = this
        let forceStop = false
        this.$refs[name].validate((valid) => {
          if (valid) {
            let guestConditions = []
            let guestType = this.formValidate.filterType

            this.selectedConditions.forEach(function (item) {
              let temp = {};
              temp.fieldNo = item.dimNo
              temp.type = item.type
              temp.valueList = item.valueList

              _this.conditionsList.forEach(function (li,i) {
                if(li.dimNo ==item.dimNo ){
                  temp.valuetype = li.isMulti
                }
              })


              if(item.valueList=='' || item.valueList==[] || !item.valueList){
                _this.$Message.error('标签属性值不能为空!');
                forceStop = true
                return;
              }

              guestConditions.push(temp)
            })
            // console.log(guestConditions)
            if(forceStop){
              return;
            }

            let customLabel = Regular.toRegular({"filterType": guestType},{"filters": guestConditions})
            if(_this.isEdit){
              _this.api({
                url: "/customer/group/update",
                method: "post",
                params:{
                  labels:customLabel,
                  id:this.formValidate.id,
                  cgName:this.formValidate.name,
                  cgDesc:this.formValidate.desc,
                  cgType:this.formValidate.guestType
                }
              }).then(data => {
                this.$Message.success('修改客群成功!');
                _this.$parent.cancel()
                _this.isEdit = false
                _this.reset()
                _this.$emit('refreshbizlines')

              })
            }else {
              _this.api({
                url: "/customer/group/add",
                method: "post",
                params:{
                  labels:customLabel,
                  cgName:this.formValidate.name,
                  cgDesc:this.formValidate.desc,
                  cgType:this.formValidate.guestType
                }
              }).then(data => {
                this.$Message.success('添加客群成功!');
                _this.$parent.cancel()
                 _this.isEdit = false
                _this.reset()
                _this.$emit('refreshbizlines')

              })
            }


          } else {
            //this.$Message.error('Fail!');
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      reset(){
        this.isEdit=false
        this.selectedConditions = []
        this.$refs['formValidate'].resetFields();
      },
      selectCondition(val){
        // console.log(val)
        Regular.makeUp(val,this.selectedConditions,'/label/item/list',this.isEdit,this.filters,false,this.conditionsList)
      },
      containListChange(type,index){
        this.selectedConditions[index].valueList =[]
      }
    },
    created(){
      //标签列表
      this.api({
        url: "/label/list",
        method: "post"
      }).then(data => {
        this.conditionsList = data;
      })
    },
    mounted() {


    }
  }
</script>

<style lang="scss" scoped>
  .ivu-tag {
    height: 32px;
    line-height: 32px;
  }
</style>
